1
00:00:00,630 --> 00:00:01,900
Hello and welcome.

2
00:00:01,920 --> 00:00:11,220
In this video we are going to create a project directory and also the hastier mail for the project.

3
00:00:11,220 --> 00:00:15,650
I am using a Windows 7 machine to created directory.

4
00:00:15,830 --> 00:00:22,710
I will do that on the desktop just by right clicking on in the blank space am going to new and click

5
00:00:22,800 --> 00:00:30,600
on falder you can do the same if you are using a Mac and just give your Directory any name and when

6
00:00:30,600 --> 00:00:32,910
to call mine quote

7
00:00:36,360 --> 00:00:38,840
of the day.

8
00:00:40,620 --> 00:00:43,670
Feel free to call yours whatever name you like.

9
00:00:43,980 --> 00:00:46,270
So that's my directory created.

10
00:00:46,330 --> 00:00:49,080
I've called it quote of the day.

11
00:00:49,350 --> 00:00:53,820
Next in I want to do is create the hastier mill document.

12
00:00:53,940 --> 00:00:55,180
I want to use.

13
00:00:55,360 --> 00:01:00,310
I am going to be using sublime text as my editor.

14
00:01:00,960 --> 00:01:07,550
So I've opened up a new file and am going to save this file has an agent email document and one leg

15
00:01:07,590 --> 00:01:13,280
say Abbas and I'll be saving it inside the projet directory here.

16
00:01:13,540 --> 00:01:16,170
Han I'm just going to call these quotes

17
00:01:18,540 --> 00:01:21,870
quotes dot hastey mill.

18
00:01:22,140 --> 00:01:25,120
He can see is also hate mail listed here.

19
00:01:25,120 --> 00:01:26,720
So can a colleague say.

20
00:01:26,890 --> 00:01:30,850
So this file now is going to be an hastier mail.

21
00:01:30,850 --> 00:01:36,290
Far I have already restaged to code.

22
00:01:36,300 --> 00:01:40,260
I'm just going to copy that in and then explain.

23
00:01:40,260 --> 00:01:42,260
Line by line.

24
00:01:42,460 --> 00:01:47,410
Be a lot easier and more efficient for me to explain it this way.

25
00:01:47,650 --> 00:01:55,310
So this is the hastier mail for the project so I'm going to explain the code line by line.

26
00:01:55,650 --> 00:01:59,790
Line one here is what is referred to as the dog type.

27
00:01:59,790 --> 00:02:09,150
So the very first thing you have to indicate in a template document the doctype is not part of the actual

28
00:02:09,740 --> 00:02:10,630
document.

29
00:02:10,680 --> 00:02:19,410
It is a declaration basically telling the web browsers that the content of this farm is going to be

30
00:02:19,430 --> 00:02:28,360
hastier Mail 5 line 2 is where the highest here mail begins and it ends on line 25.

31
00:02:28,380 --> 00:02:37,250
So any content between line two and line 25 is regarded as the hastier mount element.

32
00:02:37,590 --> 00:02:42,090
So we've got the head section here.

33
00:02:42,250 --> 00:02:44,230
You can see this head tag here.

34
00:02:44,250 --> 00:02:50,850
That's the open head tag and that's close and head back inside the head type basically is where you

35
00:02:50,850 --> 00:02:52,900
have things like style sheet.

36
00:02:53,130 --> 00:02:55,770
You have met attacks and so on.

37
00:02:55,770 --> 00:03:02,880
So they're just for informational and reference purposes to here online for quite a reference.

38
00:03:02,910 --> 00:03:06,520
Which is a link to an external alstyle sheet.

39
00:03:06,540 --> 00:03:09,090
I will be using it for this project.

40
00:03:09,090 --> 00:03:17,500
I have not created a file yet but when I do I am going to call the quartz that csx And this is the reference.

41
00:03:17,500 --> 00:03:20,880
This is waitzkin going to be it's going to be in the same directory.

42
00:03:21,060 --> 00:03:24,820
Has this system fast or this is just a link.

43
00:03:24,930 --> 00:03:26,100
You can see a real here.

44
00:03:26,100 --> 00:03:31,210
This real basically is an attribute and tells anything green here.

45
00:03:31,470 --> 00:03:39,060
Attribute you can see here tells you also what type it is going to be a text and is going to be a success

46
00:03:39,210 --> 00:03:41,170
FAQ line 5.

47
00:03:41,190 --> 00:03:49,930
Here's where the head in tack ends the body begins on line 6 and end on line twenty three.

48
00:03:49,980 --> 00:03:56,720
Any content inside the body tag is what is going to be visible to the user.

49
00:03:56,850 --> 00:04:04,780
So inside the body type of quoted dph so deep physically deficient you can divide a section of the page.

50
00:04:04,890 --> 00:04:09,660
Inside it is where I want to quote to be rendered.

51
00:04:09,850 --> 00:04:14,470
OK so here have given it head in line 9.

52
00:04:14,490 --> 00:04:17,070
It's a head it's going to be ahead in time.

53
00:04:17,330 --> 00:04:21,820
It's going to be quiet of the day that's to close and tag it.

54
00:04:21,840 --> 00:04:31,260
Opening a tag line 10 is just going to be a paragraph that all displays some text telling the user to

55
00:04:31,260 --> 00:04:42,410
press the button below to receive a random quote line 12 defining the button see thus opening thus closing

56
00:04:42,440 --> 00:04:43,200
tag.

57
00:04:43,590 --> 00:04:52,310
When you define the button you have to attach an event that took it basically a button.

58
00:04:52,380 --> 00:04:54,510
What you do with a button you click on it.

59
00:04:54,590 --> 00:04:58,790
So this click event will handle the event of the click.

60
00:04:58,790 --> 00:04:59,900
When we click on the.

61
00:04:59,990 --> 00:05:08,290
Button Miss unclick mentality here will reference this poor this metate have set the clock to of course

62
00:05:08,460 --> 00:05:16,780
this matter is going to be a job as a group method of function that I will be defining later inside

63
00:05:16,780 --> 00:05:18,370
my javascript FAQ.

64
00:05:18,730 --> 00:05:26,230
So when you click on the button it will call this function and the code inside that function will respond

65
00:05:26,380 --> 00:05:27,530
to the click.

66
00:05:27,610 --> 00:05:34,750
And this is just a text that will be displayed on the button that will see you click on new quotes or

67
00:05:34,750 --> 00:05:37,230
new quote here.

68
00:05:37,340 --> 00:05:40,690
Not that deep inside the main Dave.

69
00:05:41,030 --> 00:05:49,860
Dave here this minute Dave I am 13 to 17 is where we are going to render the quote.

70
00:05:49,870 --> 00:05:52,430
So we've got two paragraphs here with 10 ideas.

71
00:05:52,450 --> 00:06:00,370
Core quart output that means that were going to output the results so when the user clicks on the button

72
00:06:00,450 --> 00:06:05,890
it'll generate around them quote and display the code inside base paragraph.

73
00:06:05,890 --> 00:06:08,430
Here are like 16.

74
00:06:08,440 --> 00:06:12,460
We've also got off an idea called output.

75
00:06:12,460 --> 00:06:19,050
This again is a paragraph and the name of the author is going to be displayed in a separate line.

76
00:06:19,090 --> 00:06:21,220
Inside this paragraph.

77
00:06:21,430 --> 00:06:22,450
These are comments.

78
00:06:22,450 --> 00:06:25,270
This is how you write comments in his mail.

79
00:06:25,510 --> 00:06:32,120
So anything I've got to comment on will be ignored when the code actually executes.

80
00:06:32,440 --> 00:06:34,030
So this is close indeed.

81
00:06:34,060 --> 00:06:35,390
For this.

82
00:06:35,730 --> 00:06:43,640
And online a team we've caught a script on line 21.

83
00:06:43,770 --> 00:06:49,040
What is script tag and you notice you got declares RC attribute.

84
00:06:49,050 --> 00:06:50,800
Politically this is this source.

85
00:06:50,930 --> 00:06:59,380
So I am referencing an external javascript far so the actual quotes that will be generated are going

86
00:06:59,380 --> 00:07:02,540
to be located inside this javascript FAQ.

87
00:07:02,540 --> 00:07:10,030
I have not created it yet when I do I am going to call it quotes Jesus and is going to be in the same

88
00:07:10,030 --> 00:07:13,320
directory as my hishe to me.

89
00:07:13,480 --> 00:07:18,880
So far so hands have just done quotes s because he is going to be in the same direction.

90
00:07:19,210 --> 00:07:24,550
So this is basically the hastier mail for the application.

91
00:07:24,570 --> 00:07:32,290
Got a reference to externals here are still javascript which will create a tap and also a reference

92
00:07:32,320 --> 00:07:34,900
to external csx.

93
00:07:35,050 --> 00:07:37,230
So that is it for this show.

94
00:07:37,240 --> 00:07:40,060
I'm just going to click on the file option and click save.

95
00:07:40,120 --> 00:07:45,320
Or we can quickly run this so we can see what the structure looks like.

96
00:07:45,610 --> 00:07:49,810
So to run it open up the directory which is this one.

97
00:07:49,810 --> 00:07:56,920
In my case I am just going to click on this page TMF file and it should give us the current structure.

98
00:07:57,240 --> 00:08:00,770
Oh it looks like so this is what it looks like at the moment.

99
00:08:00,790 --> 00:08:04,270
We haven't got any CFS but this is the button.

100
00:08:04,300 --> 00:08:08,960
So the idea is to click on the button and it will generate a random quote.

101
00:08:09,020 --> 00:08:15,160
So yeah if you got your page looking like it's well done means we are on the same page.

102
00:08:15,280 --> 00:08:17,480
So that's it for this lecture.

103
00:08:17,530 --> 00:08:19,000
Thank you for watching.

104
00:08:19,090 --> 00:08:19,570
Bye.